<template>
  <div class="add">
    <el-card class="add-container">
      <el-form :model="shopForm" :rules="rules" ref="shopRef" label-width="100px" class="ShopForm">
        <el-form-item label="商店名称" prop="name">
          <el-input style="width: 300px" v-model="shopForm.name" placeholder="请输入视频名称"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input style="width: 300px" type="textarea" v-model="shopForm.address" placeholder="请输入视频地址"></el-input>
        </el-form-item>
         <el-form-item label="描述" prop="describe">
          <el-input style="width: 300px" v-model="shopForm.describe" placeholder="请输入视频名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { localGet, uploadImgServer, uploadImgsServer, hasEmoji } from '@/utils'
export default {
  name: 'AddShop',
  setup() {
    const { proxy } = getCurrentInstance()
    console.log('proxy', proxy)
    const editor = ref(null)
    const shopRef = ref(null)
    const route = useRoute()
    const router = useRouter()
    const { id } = route.query
    const { name } = route.query
    const { address } = route.query
    const { describe } = route.query
    const state = reactive({
      uploadImgServer,
      token: localGet('token') || '',
      id: id,
      name: name,
      address: address,
      describe: describe,
      shopForm: {
        name: '',
        address: '',
        describe: ''
      },
      rules: {
        name: [
          { required: 'true', message: '请填写商店名称', trigger: ['change'] }
        ],
        address: [
          { required: 'true', message: '请填写商店地址', trigger: ['change'] }
        ],
        describe: [
          { required: 'true', message: '请填写描述', trigger: ['change'] }
        ]
      }
    })
    onMounted(() => {
      if (id) {
        // axios.put('/videos',{
        //     id: id
        // }).then(res => {
        //   const { videos } = res
        //   state.videoForm = {
        //    title: videos.title,
        //    img: videos.img
        //   }
        // })
        state.shopForm = {
           name: state.name,
           address: state.address,
           describe: state.describe
          }
      }
    })
    
    onBeforeUnmount(() => {
    //   instance.destroy()
    //   instance = null
    })
    const submitAdd = () => {
      shopRef.value.validate((vaild) => {
        if (vaild) {
          // 默认新增用 post 方法
          let httpOption = axios.post
          let params = {
            name: state.shopForm.name,
            address: state.shopForm.address,
            describe: state.shopForm.describe
          }
          console.log('params', params)
          if (id) {
            params.id = id
            // 修改商品使用 put 方法
            httpOption = axios.put
          }
          httpOption('/shops', params).then(() => {
            ElMessage.success(id ? '修改成功' : '添加成功')
            router.push({ path: '/shop' })
          })
        }
      })
    }
    const handleBeforeUpload = (file) => {
    //   const sufix = file.name.split('.')[1] || ''
    //   if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
    //     ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
    //     return false
    //   }
    }
    const handleUrlSuccess = (val) => {
    //   state.goodForm.goodsCoverImg = val.data || ''
    }
    const handleChangeCate = (val) => {
    //   state.categoryId = val[2] || 0
    }
    return {
      ...toRefs(state),
      shopRef,
      submitAdd,
      handleBeforeUpload,
      handleUrlSuccess,
      editor,
      handleChangeCate
    }
  }
}
</script>

<style scoped>
  .add {
    display: flex;
  }
  .add-container {
    flex: 1;
    height: 100%;
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
  }
  .avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
  }
</style>